<template>
    <div>
        <el-image src="../src/assets/images/resource/BANNER.jpg"></el-image>
        <!-- 内容 -->
        <div class="content flex">
            <div class="c_left">
                <div :class="{item, active:item.active }" v-for="item,index in navlist" :key="index" @click="selectnav(index)">{{ item.name }}</div>
            </div>
            <!-- 物业租赁 -->
            <div class="c_right"  v-show="page == 0">
                <div class="title">
                    <div class="h1">物业租赁</div>
                </div>
                <div class="h2">仓库</div>
                <div class="null_line"> </div>
                <div class="r_text flex">
                    <div class="item" v-for="item,index in imglist1_1" :key="index">
                        <div class="item_img">
                            <el-image :src=item.img></el-image>
                        </div>
                        <div class="item_text">
                            <div>{{ item.name }}</div>
                            <div>{{ item.area }}</div>
                            <div>{{ item.addr }}</div>
                        </div>
                    </div>
                </div>
                <div class="null_line"> </div>
                <div class="h2">厂房</div>
                <div class="null_line"> </div>
                <div class="r_text flex">
                    <div class="item" v-for="item,index in imglist1_2" :key="index">
                        <div class="item_img">
                            <el-image :src=item.img></el-image>
                        </div>
                        <div class="item_text">
                            <div>{{ item.name }}</div>
                            <div>{{ item.area }}</div>
                            <div>{{ item.addr }}</div>
                        </div>
                    </div>
                </div>
                <div class="null_line"> </div>
                <div class="h2">临街旺铺</div>
                <div class="null_line"> </div>
                <div class="r_text flex">
                    <div class="item" v-for="item,index in imglist1_3" :key="index">
                        <div class="item_img">
                            <el-image :src=item.img></el-image>
                        </div>
                        <div class="item_text">
                            <div>{{ item.name }}</div>
                            <div>{{ item.area }}</div>
                            <div>{{ item.addr }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 工程车 -->
            <div class="c_right"  v-show="page == 1">
                <div class="title">
                    <div class="h1">车辆设备</div>
                </div>
                <div class="h2">工程车</div>
                <div class="null_line"> </div>
                <div class="r_text flex">
                    <div class="item" v-for="item,index in imglist2_1" :key="index">
                        <div class="item_img">
                            <el-image :src=item.img></el-image>
                        </div>
                        <div class="item_text2 flex">
                            <div>名称：{{ item.name }}</div>
                            <div>载重：{{ item.use }}</div>
                        </div>
                    </div>
                </div>
                <div class="null_line"> </div>
                <div class="h2">运输车</div>
                <div class="null_line"> </div>
                <div class="r_text flex">
                    <div class="item" v-for="item,index in imglist2_2" :key="index">
                        <div class="item_img">
                            <el-image :src=item.img></el-image>
                        </div>
                        <div class="item_text2 flex">
                            <div>名称：{{ item.name }}</div>
                            <div>载重：{{ item.use }}</div>
                        </div>
                    </div>
                </div>
                <div class="null_line"> </div>
                <div class="h2">道路救援</div>
                <div class="null_line"> </div>
                <div class="r_text flex">
                    <div class="item" v-for="item,index in imglist2_3" :key="index">
                        <div class="item_img">
                            <el-image :src=item.img></el-image>
                        </div>
                        <div class="item_text2 flex">
                            <div>名称：{{ item.name }}</div>
                            <div>载重：{{ item.use }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 运输服务 -->
            <div class="c_right" v-show="page == 2">
                <div class="title">
                    <div class="h1">运输服务</div>
                    <div class="null_line"> </div>
                </div>
                <div class="h2">运输路线(广州全境)</div>
                <div class="null_line"> </div>
                <div class="r_text">
                    <el-image src="../src/assets/images/resource/image.jpg"></el-image>
                    <div class="null_line"> </div>
                    <div class="h2">运输路线(广州全境)</div>
                    <div class="null_line"> </div>
                    <div class="item1 justify-between">
                        <div class="item_img1"><el-image src="../src/assets/images/resource/yunshu01.jpg"></el-image></div>
                        <div class="item_img1"><el-image src="../src/assets/images/resource/yunshu02.jpg"></el-image></div>
                        <div class="item_img1"><el-image src="../src/assets/images/resource/yunshu03.jpg"></el-image></div>
                    </div>
                    <div class="null_line"> </div>
                    <div class="item1 justify-between">
                        <div class="item_img2"><el-image style="width:100%" fit="contain" src="../src/assets/images/resource/yunshu01.jpg"></el-image></div>
                        <div class="item_img2"><el-image style="width:100%" src="../src/assets/images/resource/yunshu02.jpg"></el-image></div>
                    </div>
                    <div class="null_line"> </div>
                    <div class="h2">运输路线(广州全境)</div>
                    <div class="null_line"> </div>
                    <el-image src="../src/assets/images/resource/yunshu06.jpg"></el-image>
                    <div class="null_line"> </div>
                    <div class="text">中兴贸易组建80余人的精英司机团队，以12年平均驾龄为基底，打造大湾区高效安全的运输标杆。团队含30名A1驾照重型车驾驶员、15名危险品及冷链运输持证专家，5人获评“广东省安全驾驶标兵”，形成老中青三代传帮带梯队——十年以上经验“导师”全程带教，200小时严苛实训方可上岗，每月星级考核中65%司机蝉联五星评级。依托智能ADAS预警系统与每日出车双检（健康监测+车辆安全），创下628万公里零重大事故记录，15分钟极速响应湾区高速救援需求，2022年台风季高效处置53起突发故障。从装货监督防损到“中兴智运”APP实时追踪，从精密仪器“零震动”运输到抗疫物资星夜驰援，这支队伍用细节诠释服务：王师傅创下单月1.5万公里零投诉记录，李队长带队攻克港珠澳大桥钢箱梁夜运难题，累计收获客户致谢锦旗87面。年度VR极端天气模拟、新能源车操作认证、跨境法规特训持续赋能，同步配备颈椎理疗舱与心理疏导室，让技术力与人文关怀共同守护车轮上的承诺。他们不仅是货物搬运者，更是产业链的守护者——以方向盘的每一次精准转向，串联起大湾区蓬勃发展的动脉。</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import {reactive, ref} from 'vue';

const navlist = reactive([
    {
        name:'物业租赁',
        active:true,
    },
    {
        name:'车辆设备',
        active:false,
    },
    {
        name:'运输服务',
        active:false,
    },
])

//物业租赁
const imglist1_1 = reactive([
    {
        img:'../src/assets/images/resource/wuye01.jpg',
        name:'名称：XXXXX仓库',
        area:'面积：2000㎡',
        addr:'地址：广州市南沙区XXXXXXXXXXXXX'
    },
    {
        img:'../src/assets/images/resource/wuye02.jpg',
        name:'名称：XXXXX仓库',
        area:'面积：2000㎡',
        addr:'地址：广州市南沙区XXXXXXXXXXXXX'
    },
    {
        img:'../src/assets/images/resource/wuye03.jpg',
        name:'名称：XXXXX仓库',
        area:'面积：2000㎡',
        addr:'地址：广州市南沙区XXXXXXXXXXXXX'
    },
    {
        img:'../src/assets/images/resource/wuye04.jpg',
        name:'名称：XXXXX仓库',
        area:'面积：2000㎡',
        addr:'地址：广州市南沙区XXXXXXXXXXXXX'
    },
    {
        img:'../src/assets/images/resource/wuye05.jpg',
        name:'名称：XXXXX仓库',
        area:'面积：2000㎡',
        addr:'地址：广州市南沙区XXXXXXXXXXXXX'
    },
    {
        img:'../src/assets/images/resource/wuye06.jpg',
        name:'名称：XXXXX仓库',
        area:'面积：2000㎡',
        addr:'地址：广州市南沙区XXXXXXXXXXXXX'
    },
])
const imglist1_2 = reactive([
    {
        img:'../src/assets/images/resource/wuye07.jpg',
        name:'名称：XXXXX仓库',
        area:'面积：2000㎡',
        addr:'地址：广州市南沙区XXXXXXXXXXXXX'
    },
    {
        img:'../src/assets/images/resource/wuye08.jpg',
        name:'名称：XXXXX仓库',
        area:'面积：2000㎡',
        addr:'地址：广州市南沙区XXXXXXXXXXXXX'
    },
    {
        img:'../src/assets/images/resource/wuye09.jpg',
        name:'名称：XXXXX仓库',
        area:'面积：2000㎡',
        addr:'地址：广州市南沙区XXXXXXXXXXXXX'
    },
    {
        img:'../src/assets/images/resource/wuye10.jpg',
        name:'名称：XXXXX仓库',
        area:'面积：2000㎡',
        addr:'地址：广州市南沙区XXXXXXXXXXXXX'
    },
    {
        img:'../src/assets/images/resource/wuye11.jpg',
        name:'名称：XXXXX仓库',
        area:'面积：2000㎡',
        addr:'地址：广州市南沙区XXXXXXXXXXXXX'
    },
    {
        img:'../src/assets/images/resource/wuye12.jpg',
        name:'名称：XXXXX仓库',
        area:'面积：2000㎡',
        addr:'地址：广州市南沙区XXXXXXXXXXXXX'
    },
])
const imglist1_3 = reactive([
    {
        img:'../src/assets/images/resource/wuye13.jpg',
        name:'名称：XXXXX仓库',
        area:'面积：2000㎡',
        addr:'地址：广州市南沙区XXXXXXXXXXXXX'
    },
    {
        img:'../src/assets/images/resource/wuye14.jpg',
        name:'名称：XXXXX仓库',
        area:'面积：2000㎡',
        addr:'地址：广州市南沙区XXXXXXXXXXXXX'
    },
    {
        img:'../src/assets/images/resource/wuye15.jpg',
        name:'名称：XXXXX仓库',
        area:'面积：2000㎡',
        addr:'地址：广州市南沙区XXXXXXXXXXXXX'
    },
    {
        img:'../src/assets/images/resource/wuye16.jpg',
        name:'名称：XXXXX仓库',
        area:'面积：2000㎡',
        addr:'地址：广州市南沙区XXXXXXXXXXXXX'
    },
    {
        img:'../src/assets/images/resource/wuye17.jpg',
        name:'名称：XXXXX仓库',
        area:'面积：2000㎡',
        addr:'地址：广州市南沙区XXXXXXXXXXXXX'
    },
    {
        img:'../src/assets/images/resource/wuye18.jpg',
        name:'名称：XXXXX仓库',
        area:'面积：2000㎡',
        addr:'地址：广州市南沙区XXXXXXXXXXXXX'
    },
])

//车辆设备
const imglist2_1 = reactive([
    {
        img:'../src/assets/images/resource/shebei01.jpg',
        name:'叉车',
        use:'25吨'
    },
    {
        img:'../src/assets/images/resource/shebei02.jpg',
        name:'吊车',
        use:'25吨'
    },
    {
        img:'../src/assets/images/resource/shebei03.jpg',
        name:'推土机',
        use:'25吨'
    },
    {
        img:'../src/assets/images/resource/shebei04.jpg',
        name:'打桩机',
        use:'25吨'
    },
    {
        img:'../src/assets/images/resource/shebei05.jpg',
        name:'挖掘机',
        use:'25吨'
    },
    {
        img:'../src/assets/images/resource/shebei06.jpg',
        name:'搅拌车',
        use:'25吨'
    },
])
const imglist2_2 = reactive([
    {
        img:'../src/assets/images/resource/shebei07.jpg',
        name:'平板拖车',
        use:'25吨'
    },
    {
        img:'../src/assets/images/resource/shebei08.jpg',
        name:'厢式货车',
        use:'25吨'
    },
    {
        img:'../src/assets/images/resource/shebei09.jpg',
        name:'集装箱',
        use:'25吨'
    },
    {
        img:'../src/assets/images/resource/shebei10.jpg',
        name:'集装箱',
        use:'25吨'
    },
    {
        img:'../src/assets/images/resource/shebei11.jpg',
        name:'平板拖车',
        use:'25吨'
    },
    {
        img:'../src/assets/images/resource/shebei12.jpg',
        name:'集装箱',
        use:'25吨'
    },
])
const imglist2_3 = reactive([
    {
        img:'../src/assets/images/resource/shebei13.jpg',
        name:'洒水车',
        use:'25吨'
    },
    {
        img:'../src/assets/images/resource/shebei14.jpg',
        name:'清障车',
        use:'25吨'
    },
    {
        img:'../src/assets/images/resource/shebei15.jpg',
        name:'清障车',
        use:'25吨'
    },
])
//运输服务
let page = ref(2)

const selectnav = (index)=>{
    navlist.forEach((i)=>{
        i.active = false
    })
    navlist[index].active = true;

    page.value = index
}
</script>
<style lang="less" scoped>
@import '@/assets/css/common.css';
.content{
    padding: 80px 16%;
    .c_left{
        text-align: center;
        width: 10%;
        padding: 0 20px;
        .item{
            color: #555555;
            margin-bottom: 40px;
        }
        .item:hover{
            cursor: pointer;
        }
        .active{
            color: #EB3C03;
        }
    }
    .c_right{
        width: 89%;
        border-left: 2px solid #EEEEEE;
        padding-left: 30px;
        .title{
            margin-bottom: 10px;
            .h1{
            color: #333333;
            margin-bottom: 10px;
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            }
            .h1_label{
                text-align: center;
                font-size: 14px;
                color: #222222;
            }
        }
        
        .null_line{
                height: 10px;
            }
        .h2{
            font-weight: bold;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #222222;
        }
        .r_text{
            flex-wrap: wrap;
            .h2{
                font-weight: bold;
                height: 40px;
                line-height: 40px;
                font-size: 14px;
                color: #222222;
            }
            .item{
                width: 30%;
                padding: 10px;
                border-radius: 2px;
                box-shadow: 0px 2px 5px 1px #DDDDDD;
                box-sizing: border-box;
                margin-right: 20px;
                .item_title{
                    margin-bottom: 6px;
                    .left{
                        text-align: center;
                        width: 100px;
                        height: 26px;
                        line-height: 26px;
                        background: #EB3C03;
                        color: #ffffffd5;
                        font-size: 14px;
                        border-radius: 5px;
                        margin-top: 10px;
                    }
                    .center{
                        background: #E4E7ED;
                        width: 15px;
                        height: 15px;
                        border-radius: 50%;
                        margin: 20px 8px 0;
                    }
                }
                .item_main{
                    border-left: 2px solid #E4E7ED;
                    margin-left: 115px;
                    padding-left: 16px;
                }
                .item_text{
                    font-size: 14px;
                    div{
                        overflow: hidden;
                        height: 30px;
                        line-height: 30px;
                        color: #333333;
                    }
                }
                .item_text2{
                    font-size: 14px;
                    width: 100%;
                    div{
                        width: 50%;
                        overflow: hidden;
                        height: 30px;
                        line-height: 30px;
                        color: #333333;
                    }
                }
                
            }
            .item1{
                width: 100%;
                .item_img1{
                    width: 32.5%;
                }
                .item_img2{
                    width: 49%;
                }
            }
        }
        .text{
                color: #666666;
                font-size: 13px;
                line-height: 24px;
                .space{
                    display: inline-block;
                    width: 16px;
                }
                .dot{
                    display: inline-block;
                    background: #555555;
                    border-radius: 50%;
                    transform: translate(0,-3px);
                    width: 5px;
                    height: 5px;
                    margin: 0 5px;
                }
            }
    }
}
</style>